import './style/phoneYZ.module.css'
import TopComponent from "../../components/topComponent"
import { useEffect, useState } from "react";
import { Button, Form, Input, Toast,NavBar } from "react-vant";
import { useNavigate,useLocation } from "react-router-dom";
import { handleYZ } from '../../utils/api'
const PhoneYZ: React.FC = () => {
    const location = useLocation();
    const phone = location.state?.phone
    const navigate = useNavigate();
    const [form] = Form.useForm();
    const [formValues, setFormValues] = useState({
        code: '',
        phone: phone
    });
    const YanZhen = (value: string) => {
        const guize = /^\d{6}$/
            return guize.test(value)
    }
    const [isLoading, setIsLoading] = useState(false);
    const onFinish = async () => {
        if ( !formValues.code ) return;
        try{
            setIsLoading(true)
            Toast.loading({
                message:"正在验证中...",
                forbidClick:true,
                duration:0,
            })
            const params = {
                phone: formValues.phone,
                code: formValues.code
            }
            let res = await handleYZ(params)
            Toast.clear()
            if(res.data.code === 200){
                Toast.success({
                    message:"验证成功",
                    duration:1000,
                })
                await new Promise((resolve) => setTimeout(resolve, 3000))
                console.log('相应逻辑');
            }else{
                Toast.fail({
                    message:"验证码错误",
                    duration:1000
                })
            }
        } catch(error){
            console.log(error,'error');
            
        } finally{
            setIsLoading(false)
        }
    }
    const onValuesChange = (values: any) => {
        setFormValues({...formValues, code: values.code})
    }
    useEffect(() => {
        console.log(phone,'phone');
        
    },[])
    return(
        <>
             <div className="yanzheng-box">
                <NavBar
                    title="验证码"
                    onClickLeft={() => {navigate('/phone')
                    }}
                />
                      <Form
                        form={form}
                        onFinish={onFinish}
                        onValuesChange={onValuesChange}
                        footer={
                            <div style={{ margin: '16px 16px 0' }}>
                                <Button round nativeType='submit' type='primary' block
                                    loading={isLoading}
                                    disabled={!YanZhen(String(formValues.code))}
                                >
                                    继续
                                </Button>
                            </div>
                        }
                    >
                        <span className="parentBox-span">验证码</span>
                        <Form.Item
                            name='code'
                            rules={[{ pattern:/^\d{6}$/, message: '请输入正确的验证码' }]}
                        >
                            <Input placeholder='输入验证码' className="parentBox-input" />
                        </Form.Item>
                        <span className="parentBox-span1">我没有收到验证码？重新发送</span>
                    </Form>
                </div>
               
        
        </>
    )
}
export default PhoneYZ